<template>
    <div class="home_header_comtainer">
        <div class="userImg">
            <el-avatar :size="80" :src="userChoosed.avatar"></el-avatar>
        </div>
        <div class="userInfo">
            <p class="userName">{{userChoosed.name}}</p>
            <p class="userIdentity">{{userChoosed.identity}}</p>
            <p class="userDescription">暂无个人简介</p>
        </div>
        <div class="userButton">
            <el-button v-if="userChoosed.id==userLogin.id?false:true" size="mini">私信</el-button>
            <el-button v-if="userChoosed.id==userLogin.id?false:true" size="mini" v-cloak @click="doFollow">{{isFollowed}}</el-button>
        </div>
    </div>
</template>

<script>
import { Message } from 'element-ui';
export default {
    name:'HomeHeader',
    props:['userLogin','userChoosed'],
    data(){
        return {
            isFollowed:'',
            followCount:0,
            fansCount:0,
        }
    },
    methods:{
        getIsFollowed(id){
            this.$axios.post('/api/follows/getIsFollow',{
                follow:id,
            })
            .then(res=>{
                if(res.data=="已关注"){
                    this.isFollowed="已关注";
                }
                else{
                    this.isFollowed="关注";
                }
            })
        },
        getFollowCount(id){
            this.$axios.post('/api/follows/getUserFollowCount',{
                follow:id,
            })
            .then(res=>{
                this.followCount=res.data.data;
            })
        },
        getFansCount(id){
            this.$axios.post('/api/follows/getUserFansCount',{
                follow:id,
            })
            .then(res=>{
                this.fansCount=res.data.data;
            })
        },
        doFollow(){
            if(this.isFollowed=="关注"){
                this.$axios.post('/api/follows/saveFollow',{
                    follow:this.userChoosed.id,
                })
                .then(res=>{
                    if(res.data.ok==1){
                        Message.error("出错了！");
                    }
                    else{
                        Message.success({message:"关注成功~~~",showClose:true});
                        this.isFollowed="已关注";
                        this.fansCount+=1;
                    }
                })
            }
            else if(this.isFollowed=="已关注"){
                this.$axios.post('/api/follows/canserFollow',{
                    follow:this.userChoosed.id,
                })
                .then(res=>{
                    if(res.data.ok==1){
                        Message.error("出错了！");
                    }
                    else{
                        Message.success({message:"已取消关注~~~",showClose:true});
                        this.isFollowed="关注";
                        this.fansCount-=1;
                    }
                })
            }
        }
    },
    created(){
        if(this.userChoosed.id){
            this.getIsFollowed(this.userChoosed.id);
            // this.getFollowCount(this.userChoosed.id);
            // this.getFansCount(this.userChoosed.id);
        }
    },
    watch:{
        userChoosed:function(){
            this.getIsFollowed(this.userChoosed.id);
            // this.getFollowCount(this.userChoosed.id);
            // this.getFansCount(this.userChoosed.id);
        },
    }
}
</script>

<style scoped>
.home_header_comtainer{
    width:100%;
    /* height:100px; */
    box-shadow: 0 1px 2px 0 rgba(0,0,0,.04);
    border:1px solid #ccc;
    margin-bottom:8px;
    display: flex;
    box-sizing: border-box;

}
.userImg{
    /* float:left; */
    height: 80px;
    width: 80px;
    margin: 19px 24px 32px;
    position: relative;
}
.userInfo{
    /* float:left; */
    width:50%;
    margin-top:27px;
    margin-bottom:24px;
    padding-left:20px;
    box-sizing: border-box;
}
.userButton{
    width:calc(50% - 100px);
    margin-top:27px;
    margin-bottom:24px;
}
.userName{
    font-size: 26px;
    color: #4d4d4d;
    min-height: 24px;
    margin-top:0;
}
.userIdentity{
    color:#666;
    font-size:12px;
    margin-top:20px;
}
.userDescription{
    color:#666;
    font-size:12px;
    margin-top:10px;
}
.el-button{
    float:right;
    margin-right:20px;
}
.el-button:hover{
    background:#f21f2b;
    color:#fff;
}
</style>

